<template>
    商品页
    <ul>
        <li v-for="product in products" :key="product">
            <!-- <RouterLink :to="{
                path: '/product/detail',
                query: {
                    id: product.id,
                    name: product.name,
                    price: product.price
                }
            }">{{ product.name }}</RouterLink> -->
            <RouterLink :to="{
                name: 'xq', // 使用params传参时必须使用name,不能使用path
                params: {
                    id: product.id,
                    name: product.name,
                    price: product.price
                }
            }">{{ product.name }}</RouterLink>
        </li>
    </ul>
    <hr>
    <!-- 展示区 -->
    <div>
        <RouterView></RouterView>
    </div>
</template>
<script setup>
import { reactive } from 'vue';

const products = reactive([{
    id: 1,
    name: 'iphone16',
    price: 6999
}, {
    id: 2,
    name: '华为MateXT',
    price: 23999
}, {
    id: 3,
    name: '小米15',
    price: 4999
}])
</script>